<template>
  <footer class="footer">
    <div class="footer-inner pt-30px pb-23px my-0 mx-auto">
      <div class="footer-content flex justify-between flex-wrap">
        <img src="/logo/logo-white.png" alt="" class="logo" />
        <div class="sections flex flex-wrap">
          <section>
            <h5 class="section-title">平台链接</h5>
            <div class="links">
              <a
                  v-for="link in linkList"
                  :key="link.id"
                  :href="link.openUrl"
                  target="_blank"
              >{{ link.linkTitle }}</a
              >
            </div>
          </section>
          <section>
            <h5 class="section-title">快速链接</h5>
            <div class="links">
              <router-link to="/supply">供需信息</router-link>
              <router-link to="/model/square">模型广场</router-link>
              <router-link to="/dataSource">数据集</router-link>
              <router-link to="/news">行业资讯</router-link>
              <router-link to="/about">关于我们</router-link>
            </div>
          </section>
          <section>
            <h5 class="section-title">服务咨询</h5>
            <div class="contact-info">
              service@slquan.com
            </div>
            <div class="codes flex">
              <div v-for="code in codeList" :key="code.id" class="code-item">
                <img class="code-img" :src="code.linkPicUrl" alt="" />
                <h6>{{ code.linkTitle }}</h6>
              </div>
            </div>
          </section>
        </div>
      </div>
      <div class="footer-bottom">
        Copyright 2003-2020 四川浮点运算科技有限公司
      </div>
    </div>
  </footer>
</template>

<script setup>
import { useConfigStore } from "@/store";

const configStore = useConfigStore();

const linkList = computed(
    () => configStore.configList?.linkList.slice(0, 6) || []
);
const codeList = computed(
    () => configStore.configList?.codeList.slice(0, 2) || []
);
</script>

<style lang="less" scoped>
.footer {
  color: #fff;
  background: #18202f;
  &-inner {
    width: 90%;
    max-width: 1200px;
  }
  .footer-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .logo {
    width: 100px;
    height: 32px;
    margin-bottom: 16px;
  }
  .sections {
    display: flex;
    flex-wrap: wrap;
  }
  section {
    margin: 16px;
    .section-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 16px;
    }
    .links {
      display: flex;
      flex-direction: column;
      a {
        color: #b0b0b0;
        font-size: 14px;
        margin-bottom: 8px;
        &:hover {
          color: #ffffff;
        }
      }
    }
    .contact-info {
      font-weight: 600;
      font-size: 20px;
      margin-bottom: 16px;
    }
    .codes {
      display: flex;
      .code-item {
        margin-right: 24px;
        text-align: center;
        .code-img {
          width: 80px;
          height: 80px;
        }
        h6 {
          font-size: 12px;
          margin-top: 8px;
        }
      }
    }
  }
  .footer-bottom {
    text-align: center;
    font-size: 12px;
  }

  @media (min-width: 768px) {
    .logo {
      width: 131px;
      height: 42px;
    }
    section {
      margin: 16px 40px;
      .section-title {
        font-size: 18px;
        margin-bottom: 24px;
      }
      .links a {
        font-size: 14px;
        margin-bottom: 12px;
      }
      .contact-info {
        font-size: 24px;
        margin-bottom: 32px;
      }
      .codes .code-item {
        .code-img {
          width: 100px;
          height: 100px;
        }
        h6 {
          font-size: 14px;
        }
      }
    }
    .footer-bottom {
      font-size: 14px;
    }
  }
}
</style>
